<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>订单详情</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style type="text/css">
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background: #fff;
			}
			
			.mui-bar {
				height: 6.4rem;
				padding-left: 1.2rem;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-content {
				margin-bottom: 5.4rem;
			}
			
			.mui-table-view-cell {
				padding: 1.8rem 1.2rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after,
			.mui-table-view-cell:before,
			.mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.share {
				position: absolute;
				right: 2.4rem;
				bottom: 0.8rem;
			}
			
			.order-head {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #333;
			}
			
			.head-num {
				font-size: 2rem;
				padding-top: 3rem;
			}
			
			.head-type {
				font-size: 1.4rem;
				padding: 2.1rem 0 1.2rem
			}
			
			.head-price {
				font-size: 1.4rem;
				padding-bottom: 1.5rem;
			}
			
			.head-price span {
				color: #e61874;
			}
			
			.order-content {
				padding: 1.6rem 1.2rem 1.5rem;
				background-color: #fff;
			}
			
			.order-content li {
				padding-bottom: 1.5rem;
			}
			
			.order-content li:last-child {
				padding-bottom: 0;
			}
			
			.content-left {
				font-size: 1.4rem;
				color: #333;
			}
			
			.content-right {
				color: #999;
			}
			
			.speed {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 2rem 0;
			}
			
			.speed-item img {
				width: 0.8rem;
			}
			
			.stay-time {
				display: flex;
				justify-content: space-between;
				font-size: 0;
			}
			
			.tip {
				display: inline-block;
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: #999;
				padding: 1.5rem 1.2rem;
			}
			
			.lets-go {
				font-size: 0;
				text-align: right;
				padding: 1.2rem 0 1.5rem;
			}
			
			.lets-go img {
				width: 1.5rem;
				vertical-align: bottom;
				margin-right: 0.9rem;
			}
			
			.lets-go a {
				font-size: 1.4rem;
				color: #e61874;
			}
			
			.foot {
				position: fixed;
				display: flex;
				align-items: center;
				bottom: 0;
				height: 5.4rem;
				line-height: 5.4rem;
				width: 100%;
				background-color: #fff;
				padding: 0 1.2rem;
				border-top: 1px solid #e0e0e0;
			}
			
			.foot span {
				display: inline-block;
				width: 100%;
				height: 4.2rem;
				line-height: 4.2rem;
				font-size: 1.6rem;
				text-align: center;
				color: #fff;
				background-color: #e61874;
				border-radius: 0.4rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
			<a class="share">
				<img width="20" src="../styles/images/order/icon_share.png@2x.png" />
			</a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="order-head">
					<span class="head-num">订单号 <span>12345678</span></span>
					<span class="head-type">订单状态：<span>已确认</span></span>
					<span class="head-price">订单总额：<span>￥278</span></span>
				</li>
			</ul>
			<span class="tip">如您需要续住,请再次下单以保证您正常获得积分/返现等优惠。</span>
			<ul class="order-content">
				<li class="stay-time">
					<span class="content-left">入店：<span class="content-right">3月30日(周一)</span></span>
					<span class="content-left">离店：<span class="content-right">3月31日(周二)</span></span>
				</li>
				<li>
					<span class="content-left">入住房型：<span class="content-right">高级大床房(1间)</span></span>
				</li>
				<li>
					<span class="content-left">入住人：<span class="content-right">张三三</span></span>
				</li>
				<li>
					<span class="content-left">酒店名称：<span class="content-right">深圳雅商会馆</span></span>
				</li>
				<li>
					<div class="content-left">酒店地址：<span class="content-right" style="line-height: 1.8rem;">南山区白石洲新中路中路3号 近名商高尔夫球场</span></div>
					<!--<div class="lets-go">
						<img src="../styles/images/order/icon_navigation.png@2x.png" />
						<a href="">带我去酒店</a>
					</div>-->
				</li>
				<li>
					<span class="content-left">酒店电话：<span class="content-right">0755-86093333</span></span>
				</li>
				<li>
					<span class="content-left">发票状态：<span class="content-right">不需要</span></span>
				</li>
			</ul>
			<span class="tip">订单提交将立即操作扣款，我们将尽快通知您预定结果；如预定未成功，将全额退还之原支付账户；预定成功后不可变更/取消；未如约入住或提前退房不退费。</span>
		</div>
		<div class="foot" data-url="./hotel-detail2.html">
			<span>再次预定</span>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			var orderHead = document.getElementsByClassName("order-head")[0];
			var orderContent = document.getElementsByClassName("order-content")[0];

			window.addEventListener('odID', function(event) {
				var data = event.detail.orderData;
				console.log("订单详情页" + JSON.stringify(data));
				console.log(data.guestname.length);
				
				var orderHeadHtml = '';
				var orderContentHtml = '';
				
				var cid = data.checkindate.split("-");
				var cod = data.checkoutdate.split("-");
				var sWeek = new Date(cid[0], parseInt(cid[1] - 1), cid[2]);
				var eWeek = new Date(cod[0], parseInt(cod[1] - 1), cod[2]);
				var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
				var sweek = weekArray[sWeek.getDay()];
				var eweek = weekArray[eWeek.getDay()];
				var guestname = data.guestname.split(",");
				var orderstatus; // 订单状态

				orderHeadHtml += '<span class="head-num">订单号 <span>' + data.orderid + '</span></span>';
				switch (data.orderstatus){
					case 0:
						orderstatus = "未支付";
						break;
					case 1:
						orderstatus = "已确认";
						break;
					case 2:
						orderstatus = "待处理";
						break;
					case 2:
						orderstatus = "已取消";
						break;
					default:
						break;
				}
				orderHeadHtml += '<span class="head-type">订单状态：<span>' + orderstatus + '</span></span>';
				orderHeadHtml += '<span class="head-price">订单总额：<span>￥' + data.totalamount + '</span></span></li>';
				
				orderContentHtml += '<li class="stay-time">';
				orderContentHtml += '<span class="content-left">入店：<span class="content-right">' + cid[1] + '月' + cid[2] + '日(' + sweek + ')</span></span>';
				orderContentHtml += '<span class="content-left">离店：<span class="content-right">' + cod[1] + '月' + cod[2] + '日(' + eweek + ')</span></span></li>';
				orderContentHtml += '<li><span class="content-left">房型：<span class="content-right">' + data.roomtypename + '(' + data.roomnum + '间)</span></span></li>';
				for(var i = 0; i < guestname.length; i++) {
					orderContentHtml += '<li><span class="content-left">入住人：<span class="content-right">' + guestname[i] + '</span></span></li>';
				}
				orderContentHtml += '<li ><span class="content-left">酒店名称：<span class="content-right">' + data.hotelchnname + '</span></span></li>';
				orderContentHtml += '<li><div class="content-left">酒店地址：<span class="content-right" style="line-height: 0.9rem;">南山区白石洲新中路中路3号 近名商高尔夫球场</span></div></li>';
				orderContentHtml += '<li ><span class="content-left">酒店电话：<span class="content-right">0755-86093333</span></span></li>';
				orderContentHtml += '<li ><span class="content-left">发票状态：<span class="content-right">' + data.order_invoices + '</span></span></li>';
				
				orderHead.innerHTML = orderHeadHtml;
				orderContent.innerHTML = orderContentHtml;
				
				console.log("入住人有几个：" + guestname.length);
			});
		</script>
	</body>

</html>